<template>
    <section>
        <header>
            <div>
                <h1>Задача</h1>
            </div>
        </header>
    </section>
    <section>
        <article>
            <div>
                <div v-if="task">
                    <div>{{ task.title }}</div>
                    <div>{{ task.description }}</div>
                    <div>{{ task.deadline }}</div>
                    <div>{{ task.priority }}</div>
                </div>
            </div>
            <div>
                <Link :href="route('tasks.edit', task.id)">Редатировать задачу</Link>
            </div>
            <div>
                <form @submit.prevent="destroy">
                    <div>
                        <button type="submit">Удалить задачу</button>
                    </div>
                </form>
            </div>
        </article>
    </section>
    <section>
        <footer>

        </footer>
    </section>
</template>
<script setup>
import { reactive } from 'vue'
import { router, Link } from '@inertiajs/vue3'

const props = defineProps({
    task: {
        type: Object,
        required: true
    }
})

const form = reactive({})

function destroy() {
    router.delete(`/list/${props.task.id}`, form)
}
</script>